<template>
	<div>
		<div class="cms-title" @add="addTab = !addTab">
			<p>产品管理</p>
		</div>
		<div v-show="!configTab">
			<div>
				<actionBar></actionBar>
			</div>
			<div>
				<vTable></vTable>
			</div>

		</div>
		<div v-show="configTab">
			<detail></detail>

		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	let Event = new Vue();
	let actionBar = {
		template: `
		<div class="action-bar">
		<div class="action-bar-box">
			<span>&#12288;产品名：</span>
			<el-input  placeholder="产品名" clearable prefix-icon="el-icon-search"></el-input>
		</div>
		
		<div class="mt20">
		<div class="action-bar-box">
			<span>上下架状态：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			</div>
			<div class="action-bar-box">
			<span>是否包邮：</span>
			<el-select v-model="value" placeholder="请选择">
				<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			</div>
		</div>
		<div class="action-bar-box">
			<span>开始日期：</span>
			 <el-date-picker  v-model="value1"       type="date"     placeholder="选择日期">
    </el-date-picker>
		</div>
		<div class="action-bar-box">
			<span>截止日期：</span>
			 <el-date-picker    v-model="value2"       type="date"     placeholder="选择日期">
    </el-date-picker>
		</div>
		<div>
			<el-button type="primary">搜索</el-button>
		</div>
		<hr>
		<div>
			<el-button type="success">添加</el-button>
			<el-button type="primary">启用</el-button>
			<el-button type="warning">禁用</el-button>
			<el-button type="danger">删除</el-button>
		</div>
		</div>
	`,
		data() {
			return {
				options: [{
					value: '选项1',
					label: '黄金糕'
				}, {
					value: '选项2',
					label: '双皮奶'
				}, {
					value: '选项3',
					label: '蚵仔煎'
				}, {
					value: '选项4',
					label: '龙须面'
				}, {
					value: '选项5',
					label: '北京烤鸭'
				}],
				value1: '',
				value2: ''
			}
		},
		props: ['value']

	};
	let vTable = {
		template: `
		<div class="v-table">
		<el-table border stripe ref="multipleTable" :data="tableData3" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column  label="封面" width="120">
				<template slot-scope="scope">
					<img :src="scope.row.coverImg" class="vTable-img" />
	     		</template>
			</el-table-column>
			<el-table-column prop="put" label="状态" width="60" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="name" label="产品名" width="220" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="sellPrice" label="价格	" width="70" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="storeNum" label="库存" width="70" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="post" label="邮寄" width="70" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="orderNum" label="售卖量" width="70" show-overflow-tooltip>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="190" show-overflow-tooltip>
			</el-table-column>
			<el-table-column label="操作" >
				<template slot-scope="scope">
					<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">详情</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination background layout="prev, pager, next" :total="1000">
		</el-pagination>
	</div>
		
	`,
		data() {
			return {
				tableData3: [{
					"content": "<p><font color=\"#000000\">&nbsp;</font><img src=\"http://mf.xbsms.com/upload/20180313/2100a716-df15-4013-8c2c-0a857749b55d.png\" style=\"font-family: &quot;Helvetica Neue&quot;, Helvetica, &quot;PingFang SC&quot;, 微软雅黑, Tahoma, Arial, sans-serif; max-width: 100%;\"></p><p><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/8dc9c1f7-1306-4f85-8ec8-ff8e51d44c0b.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/7a55665e-42a5-46e2-b980-e1b06e8a2b44.png\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180206/6074fcd6-17a6-4e99-9492-9583805e5a65.jpg",
					"createTime": "2018-02-05 18:21",
					"dummyNum": "860",
					"dummyPrice": "78",
					"id": "960458472014278656",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180206/53e01e9f-ab96-4598-a370-80e141ec4fe8.jpg"
					}],
					"isPost": 0,
					"isPut": 1,
					"name": "洋洋乐补元贴（男士）",
					"orderNum": 1,
					"post": "包邮",
					"postMoney": "",
					"put": "上架",
					"sellPrice": "0.1",
					"special": "",
					"storeNum": "1000"
				}, {
					"content": "<p><img src=\"http://mf.xbsms.com/upload/20180313/f8d1dcf1-d3d4-4383-8c5b-dc5200f05947.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/1ca3029e-1bf7-4f93-8258-eb08b01e9a26.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/655157d1-ad59-4a86-b232-da32ae3787a7.png\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180206/b4e87529-3a04-4e87-906d-337d94281d5c.jpg",
					"createTime": "2018-02-06 00:41",
					"dummyNum": "560",
					"dummyPrice": "78",
					"id": "960553904207945728",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180206/4d045148-2d01-4f51-bb45-3340e1ce5994.jpg"
					}],
					"isPost": 0,
					"isPut": 1,
					"name": "洋洋乐补元贴（女士）",
					"orderNum": 1,
					"post": "包邮",
					"postMoney": "",
					"put": "上架",
					"sellPrice": "58",
					"special": "",
					"storeNum": "1000"
				}, {
					"content": "<p><img src=\"http://mf.xbsms.com/upload/20180313/0a6a2246-b6e9-4838-b375-3836698f801a.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/70a394e1-3532-4dce-9d73-fea38ef3aa13.jpg\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180310/e631c558-8f39-4202-8adf-8f3eba5d75f6.jpg",
					"createTime": "2018-03-10 13:23",
					"dummyNum": "",
					"dummyPrice": "78",
					"id": "972342179314544640",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/7d01ff5e-1505-4565-a754-3cc82ba25ef3.jpg"
					}],
					"isPost": 0,
					"isPut": 1,
					"name": "苗风追风贴",
					"orderNum": 0,
					"post": "包邮",
					"postMoney": "",
					"put": "上架",
					"sellPrice": "58",
					"special": "",
					"storeNum": "1000"
				}, {
					"content": "<p><img src=\"http://mf.xbsms.com/upload/20180313/0e5a5c82-5401-4eff-8984-51e56b935e9b.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/eefdf137-f953-47ba-a33e-8607f1eb4522.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/c827ab96-42b2-4c49-8deb-34ae4fbd2c09.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/b179eaeb-2d16-4103-90d8-b409a606fd4c.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/18d41983-2a5c-4f89-9227-fa95cccdf8e7.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/42f262e6-8559-4d6b-bd8a-8dd7fdaf7477.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/443ff6a7-b966-4412-b32f-4ed24dd8060b.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/f2ffeaf9-f35c-4c3a-8044-6c3edf25d792.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/5dc6c270-a5c6-414d-a209-fd7d0316f7af.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/b2457250-6962-467f-bda7-ab1d8114d58c.png\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180310/8a085081-a6ca-431d-b887-9825561e7973.jpg",
					"createTime": "2018-03-10 13:08",
					"dummyNum": "",
					"dummyPrice": "苗老济专卖",
					"id": "972338471335899136",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/ba1e1ecd-1bf7-4aee-b1d7-cd8a6cd74ed7.jpg"
					}, {
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/a86f22c6-31ea-4544-88be-782373d804d7.jpg"
					}, {
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/5d72250a-6597-41b9-ab5a-99ef763674e6.jpg"
					}, {
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/08f1b4b4-9835-45f7-8c10-4e14e2da052d.jpg"
					}],
					"isPost": 0,
					"isPut": 0,
					"name": "穿山甲透骨液",
					"orderNum": 0,
					"post": "包邮",
					"postMoney": "",
					"put": "下架",
					"sellPrice": "1600",
					"special": "",
					"storeNum": "1000"
				}, {
					"content": "<p><img src=\"http://mf.xbsms.com/upload/20180313/69153096-fb99-4170-b9ad-2dd587224be9.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/11bbce26-5508-4337-82d3-73ecdb3753cd.jpg\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180310/223d7b37-1edd-4edc-b013-5f5985a69797.jpg",
					"createTime": "2018-03-10 13:24",
					"dummyNum": "",
					"dummyPrice": "苗老济专卖",
					"id": "972342515534147584",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/5defdac4-0c87-42c1-a8e1-cb400aeff7f4.jpg"
					}],
					"isPost": 0,
					"isPut": 0,
					"name": "苗风消刺贴",
					"orderNum": 0,
					"post": "包邮",
					"postMoney": "",
					"put": "下架",
					"sellPrice": "38",
					"special": "",
					"storeNum": "1000"
				}, {
					"content": "<p><img src=\"http://mf.xbsms.com/upload/20180313/e1374a84-6aec-45e9-a20c-adba7db0900c.png\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/9e391efc-9744-444b-87fc-44aa9730fce2.jpg\" style=\"max-width:100%;\"><br></p><p><img src=\"http://mf.xbsms.com/upload/20180313/7593eb02-83bb-47e2-8ec8-60eb95e21115.jpg\" style=\"max-width:100%;\"><br></p>",
					"coverImg": "/upload/20180310/072d8245-1981-4e60-9796-715551fe055d.jpg",
					"createTime": "2018-03-10 13:03",
					"dummyNum": "",
					"dummyPrice": "苗老济专卖",
					"id": "972337158309031936",
					"imgs": [{
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/8576f50d-b8b5-43ee-810d-9ebf8b0e6620.jpg"
					}, {
						"createTime": "",
						"id": "",
						"productId": "",
						"type": "",
						"url": "/upload/20180313/890f9370-2e40-4da7-abbb-124b2c5bddd2.jpg"
					}],
					"isPost": 0,
					"isPut": 0,
					"name": "苗风颈腰散",
					"orderNum": 0,
					"post": "包邮",
					"postMoney": "",
					"put": "下架",
					"sellPrice": "1600",
					"special": "",
					"storeNum": "1000"
				}],
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
				Event.$emit('lookVip', row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			}

		}
	};

	let detail = {
		template: `
		<div>
		<div class="add-box">
			<span class="add-title">账号状态</span>
			<el-input v-model="tableData3.status"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">手机号</span>
			<el-input v-model="tableData3.phone"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">注册时间</span>
			<el-input v-model="tableData3.createTime"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">邀请人</span>
			<el-input v-model="tableData3.referrerPhone"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">昵称</span>
			<el-input v-model="tableData3.nickName"  :disabled="true"></el-input>
		</div>
		<div class="add-box">
			<span class="add-title">最后登录时间</span>
			<el-input v-model="tableData3.lastTime"  :disabled="true"></el-input>
		</div>
		<div>
			 <el-button type="info" @click="back">返回</el-button>
		</div>
	</div>
		
	`,
		data() {
			return {
				tableData3: {}
			}
		},
		methods: {
			toggleSelection(rows) {
				if(rows) {
					rows.forEach(row => {
						this.$refs.multipleTable.toggleRowSelection(row);
					});
				} else {
					this.$refs.multipleTable.clearSelection();
				}
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleEdit(index, row) {
				console.log(index, row);
			},
			handleDelete(index, row) {
				console.log(index, row);
			},
			back: function() {
				Event.$emit('config');
			}
		},
		mounted: function() {
			let that = this
			Event.$on('lookVip',
				function(data) {
					that.tableData3 = data;
				});
		}
	};

	export default {
		name: "Menu",
		components: {
			actionBar,
			vTable,
			detail
		},
		data() {
			return {
				configTab: false
			}
		},
		mounted: function() {
			let that = this;
			Event.$on('lookVip',
				function() {
					that.configTab = !that.configTab;
				});
			Event.$on('config',
				function() {
					that.configTab = !that.configTab;
				});
		}
	}
</script>

<style>
	.cms-title {
		padding: 8px 16px;
		background-color: #ecf8ff;
		border-radius: 4px;
		border-left: 5px solid #50bfff;
		margin-bottom: 20px;
	}
	
	.cms-title p {
		text-align: left;
		font-size: 24px;
	}
	
	.action-bar {
		text-align: left;
	}
	
	.action-bar-box {
		display: inline-block;
		margin-bottom: 20px;
	}
	
	.action-bar .el-input {
		width: 240px;
		margin-right: 16px;
	}
	
	.v-table,
	.v-table .el-pagination {
		margin-top: 20px;
	}
	
	.v-table .cell {
		text-align: center;
	}
	
	.add-box {
		margin-bottom: 20px;
	}
	
	.add-box .el-input {
		width: 200px;
	}
	
	.add-title {
		color: #999;
		font-size: 14px;
		margin-right: 10px;
		width: 100px;
		display: inline-block;
		text-align: right;
	}
	
	.mt20 {
		margin-bottom: 20px;
	}
	
	.vTable-img {
		width: 120px;
		height: 80px;
	}
</style>